'use client';

import React, { useEffect } from 'react';
import Link from 'next/link';
import { Button } from 'antd';
import { useTranslation } from 'react-i18next';
import { motion, useAnimation } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
import { ArrowRightOutlined } from '@ant-design/icons';

// Home page component
const HomePage = () => {
  const { t } = useTranslation();
  const controls = useAnimation();
  const [ref, inView] = useInView({
    triggerOnce: true, threshold: 0.1
  });

  useEffect(() => {
    if (inView) {
      controls.start('visible');
    }
  }, [controls, inView]);

  const fadeInUpVariant = {
    hidden: { opacity: 0, y: 60 },
    visible: (custom: number) => ({
      opacity: 1,
      y: 0,
      transition: { delay: custom * 0.2, duration: 0.6, ease: 'easeOut' }
    })
  };

  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="relative h-screen flex items-center bg-gradient-to-r from-blue-900 to-blue-700 text-white">
        <div
          className="absolute inset-0 z-0 bg-cover bg-center bg-no-repeat opacity-20"
          style={{ backgroundImage: "url('/images/power-grid.jpg')" }}
        />
        <div className="container mx-auto px-4 md:px-8 z-10">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="max-w-3xl"
          >
            <h1 className="text-4xl md:text-6xl font-bold mb-6">
              {t('home.hero.title')}
            </h1>
            <p className="text-xl md:text-2xl mb-8 text-gray-200">
              {t('home.hero.subtitle')}
            </p>
            <Link href="/products">
              <Button
                type="primary"
                size="large"
                className="bg-blue-500 border-blue-500 hover:bg-blue-600 hover:border-blue-600 text-lg h-12 px-8"
              >
                {t('home.hero.cta')}
              </Button>
            </Link>
          </motion.div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-20 bg-gray-50">
        <div className="container mx-auto px-4 md:px-8">
          <div className="text-center mb-16">


            <motion.h2
              ref={ref}
              variants={fadeInUpVariant}
              initial="hidden"
              animate={controls}
              custom={0}
              className="text-3xl md:text-4xl font-bold mb-4"
            >
              {t('home.features.title')}
            </motion.h2>

            <motion.p
              variants={fadeInUpVariant}
              initial="hidden"
              animate={controls}
              custom={1}
              className="text-xl text-gray-600 max-w-2xl mx-auto"
            >
              {t('home.features.subtitle')}
            </motion.p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {/* Feature 1 */}
            <motion.div
              variants={fadeInUpVariant}
              initial="hidden"
              animate={controls}
              custom={2}
              className="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow"
            >
              <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 text-blue-600">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <h3 className="text-xl font-bold mb-3">{t('home.features.feature1.title')}</h3>
              <p className="text-gray-600">{t('home.features.feature1.description')}</p>
            </motion.div>

            {/* Feature 2 */}
            <motion.div
              variants={fadeInUpVariant}
              initial="hidden"
              animate={controls}
              custom={3}
              className="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow"
            >
              <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6 text-green-600">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                </svg>
              </div>
              <h3 className="text-xl font-bold mb-3">{t('home.features.feature2.title')}</h3>
              <p className="text-gray-600">{t('home.features.feature2.description')}</p>
            </motion.div>

            {/* Feature 3 */}
            <motion.div
              variants={fadeInUpVariant}
              initial="hidden"
              animate={controls}
              custom={4}
              className="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow"
            >
              <div className="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-6 text-yellow-600">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                </svg>
              </div>
              <h3 className="text-xl font-bold mb-3">{t('home.features.feature3.title')}</h3>
              <p className="text-gray-600">{t('home.features.feature3.description')}</p>
            </motion.div>

            {/* Feature 4 */}
            <motion.div
              variants={fadeInUpVariant}
              initial="hidden"
              animate={controls}
              custom={5}
              className="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow"
            >
              <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6 text-purple-600">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                </svg>
              </div>
              <h3 className="text-xl font-bold mb-3">{t('home.features.feature4.title')}</h3>
              <p className="text-gray-600">{t('home.features.feature4.description')}</p>
            </motion.div>
          </div>
        </div>
      </section>

      {/* About Section */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4 md:px-8">
          <div className="flex flex-col md:flex-row items-center">
            <div className="md:w-1/2 mb-10 md:mb-0 md:pr-12">
              <motion.div
                initial={{ opacity: 0, x: -50 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.8, delay: 0.2 }}
              >
                <h2 className="text-3xl md:text-4xl font-bold mb-6">{t('home.about.title')}</h2>
                <p className="text-lg text-gray-600 mb-8">{t('home.about.description')}</p>
                <Link href="/about">
                  <Button
                    type="default"
                    size="large"
                    className="border-blue-500 text-blue-500 hover:text-blue-700 hover:border-blue-700"
                  >
                    {t('home.about.cta')} <ArrowRightOutlined />
                  </Button>
                </Link>
              </motion.div>
            </div>
            <div className="md:w-1/2">
              <motion.div
                initial={{ opacity: 0, x: 50 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.8, delay: 0.4 }}
                className="relative rounded-lg overflow-hidden shadow-xl"
                style={{ paddingBottom: '75%' }}
              >
                <div className="absolute inset-0 bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center">
                  {/* Placeholder for actual image */}
                  <div className="text-white text-6xl">LynTime</div>
                </div>
              </motion.div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 bg-blue-600 text-white">
        <div className="container mx-auto px-4 md:px-8 text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-6">
            {t('home.contact.title')}
          </h2>
          <p className="text-xl text-blue-100 mb-8 max-w-3xl mx-auto">
            {t('home.contact.description')}
          </p>
          <Link href="/contact">
            <Button
              type="primary"
              size="large"
              ghost
              className="text-lg h-12 px-8"
            >
              {t('home.contact.cta')}
            </Button>
          </Link>
        </div>
      </section>
    </div>
  );
};

export default HomePage;
